<template>
	<div class="mine_mm">
		<main class="mine_layout">
			<section class="mine_infos clearfix">
				<div class="mmm_info">
					<div class="user_icon">
						<img :src="root + uInfs.HeadImg" alt="">
					</div>
					<div class="user_detal">
						<p class="user_name">用户名：{{uInfs.UserName}}</p>
						<p class="user_name">手机号：{{uInfs.CellPhone}}</p>
					</div>
					<div class="manage_account">
						<router-link to="/personalInfo">
							<img class="vertical_align_mid" src="../assets/images/personal_info_icon.png"/>
							<img class="vertical_align_mid" src="../assets/images/arrow_rightb_icon.png"/>
						</router-link>
					</div>
				</div>
			</section>
			<section class="my_order_box">
				<div class="order_top_box">
					<div class="order_left">
						<img src="../assets/images/my_order_icon.png" alt="">
						<span>我的订单</span>
					</div>
					<router-link :to="{path: '/orders', query: {orderStatus: 6}}">
						<div class="order_right">
							<span>全部订单></span>
						</div>
					</router-link>
				</div>
				<div class="order_bottom_box">
					<ul>
						<li class="order_item">
							<router-link :to="{path: '/orders', query: {orderStatus: 1}}">
								<a href="javascript:void(0)" class="order_item_link">
									<img src="../assets/images/fukuan1.png" class="order_item_pic">
									<span class="order_item_pay">
										待付款
									</span>
									<span v-show="orderCount[1]!=0" class="order_nums">{{orderCount[1]}}</span>
								</a>
							</router-link>
						</li>
						<li class="order_item">
							<router-link :to="{path: '/orders', query: {orderStatus: 3}}">
								<a href="javascript:void(0)" class="order_item_link">
									<img src="../assets/images/fahuo1.png" class="order_item_pic">
									<span class="order_item_pay">待发货</span>
									<span v-show="orderCount[2]!=0" class="order_nums">{{orderCount[2]}}</span>
								</a>
							</router-link>
						</li>
						<li class="order_item">
							<router-link :to="{path: '/orders', query: {orderStatus: 4}}">
								<a href="javascript:void(0)" class="order_item_link">
									<img src="../assets/images/shouhuo1.png" class="order_item_pic">
									<span class="order_item_pay">待收货</span>
									<span v-show="orderCount[3]!=0" class="order_nums">{{orderCount[3]}}</span>
								</a>
							</router-link>
						</li>
						<!--<li class="order_item">
							<router-link :to="{path: '/orders', query: {orderStatus: 5}}">
								<a href="javascript:void(0)" class="order_item_link">
									<img src="../assets/images/tuihuan.png" class="order_item_pic">
									<span class="order_item_pay">待评价</span>
									<span v-show="orderCount[4]!=0" class="order_nums">{{orderCount[4]}}</span>
								</a>
							</router-link>
						</li>-->
					</ul>
				</div>
			</section>
			<!--<section class="my_order_box">
				<div class="order_top_box">
					<div class="order_left">
						<img src="../assets/images/mypackage.png" alt="">
						<span>我的钱包</span>
					</div>
					<router-link to="/myWallet">
						<div class="order_right">
							<span class="order_item_pay">￥{{uInfs.Balance}}</span>
							<span style="padding-left: 10px; padding-bottom: 10px; padding-top: 10px;">></span>
						</div>
					</router-link>
				</div>
			</section>-->

			<section class="my_order_box my_b_info">
				<router-link to="/address">
					<div class="order_top_box">
						<div class="order_left">
							<img src="../assets/images/adr_manage_icon.png" alt="">
							<span>地址管理</span>
						</div>
						<div class="order_right">
							<span>></span>
						</div>
					</div>
				</router-link>
				<router-link to="/modifyPassword">
					<div class="order_top_box">
						<div class="order_left">
							<img src="../assets/images/modify_psd_icon.png" alt="">
							<span>修改密码</span>
						</div>
						<div class="order_right">
							<span>></span>
						</div>
					</div>
				</router-link>
				<router-link to="/aboutUs">
					<div class="order_top_box">
						<div class="order_left">
							<img src="../assets/images/guanyuwomen_icon.png" alt="">
							<span>关于我们</span>
						</div>
						<div class="order_right">
							<span>></span>
						</div>
					</div>
				</router-link>
				<div @click="Logout" class="order_top_box">
					<div class="order_left">
						<img src="../assets/images/tuichu_icon.png" alt="">
						<span>退出登录</span>
					</div>
					<div class="order_right">
						<span>></span>
					</div>
				</div>
			</section>
		</main>
	</div>
</template>
<script>
	import { MessageBox } from 'mint-ui';
	import { Toast } from 'mint-ui';
	
	export default {
		created() {
			this.getOrderCount();
			this.getUDatas();
		},
		data() {
			return {
				root: this.root,
				uInfs: {},
				orderCount: []
			}
		},
		mounted() {
			
		},
		methods: {
			getUDatas() {
				let _this = this;
				_this.$http.get('/client/Members', null, localStorage.Authorization, res => {
					console.log('我的账户res', res)
					if(res.code ===200) {
						if(res.data.dataCount>0){
							_this.uInfs = res.data.list[0];
						}else {
							_this.uInfs.Balance = 0;
							_this.uInfs.Points = 0;
							
						}
					}else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			},
			getOrderCount() {
				let _this = this;
				_this.$http.get('/client/OrderCount', null, localStorage.Authorization, res => {
					console.log('订单数量res', res)
					if(res.code===200){
						_this.orderCount = res.data;
					}else if(res.code === 101) {
						localStorage.fromPath = _this.$route.fullPath
						_this.$router.push({
							path: '/login'
						})
					}
				})
			},
			Logout() {
				let _this = this;
				MessageBox.confirm('确定退出登录？').then(action => {
					localStorage.Authorization = ''
					Toast('已退出登录')
					setTimeout(function(){
						_this.$router.push('/login')
					}, 1500)
				}).catch(action => {

				})
				
			}
		}
	}
</script>
<style>
	.mine_layout {
		height: auto;
		overflow: hidden;
		padding-bottom: 60px;
		padding-top: 0;
	}
	.order_item_link {
		position: relative;
	}
	.order_nums {
		position: absolute;
		top: 6px;
		right: 5px;
		display: inline-block;
		width: 18px;
		height: 18px;
		border: 1px solid red;
		border-radius: 50%;
		color: red;
		line-height: 18px;
		background: #fff;
		text-align: center;
		font-size: 12px;
	}
	/*.mine_layout{
		padding-top: 0;
	}*/
	
</style>